<!--
 * @FileDescription 头部
 * @Author lz
 * @Date 20230606 13:25:35
 * @LastEditors lz
 * @LastEditTime 20230606 13:25:35
-->
<template>
  <div class="hdr_box">
    <img src="/public/images/图标.png" style="width: 34px; margin: 0 10px 8px 20px" />
    <span class="tit_name">{{
      HomeContent.Default.ProductName.value || "故障诊断虚拟仿真教学软件"
    }}</span>
    <!-- <minus-outlined :style="{ color: '#FFF' }" class="ico_min" /> -->
    <a-tooltip placement="bottom">
      <template #title>
        <span>退出</span>
      </template>
      <close-outlined :style="{ color: '#FFF' }" class="ico_clo" @click="close()" />
    </a-tooltip>
    <span
      v-if="HomeContent.Default.isHide.value"
      :class="
        HomeContent.Default.isLoading.value
          ? HomeContent.Default.BDT.value == '0'
            ? 'user_nameToLeft'
            : 'user_nameToRoll'
          : 'user_name'
      "
      >{{ HomeContent.Default.UserName.value || "" }}</span
    >
    <!-- 计时 -->
    <div
      :class="
        HomeContent.Default.UserName.value == '' ? 'timekeeping' : 'timekeepingLeft'
      "
      v-if="HomeContent.Default.isLoading.value && !HomeContent.Default.Duration.value"
    >
      {{ HomeContent.Default.time.value }}
    </div>
  </div>
  <div class="ConfirmationBox" v-if="state.winTypes">
    <div class="contentBox">
      <div class="content">
        <div class="txt">确认退出软件？</div>
        <span class="tip">提示</span>
        <button class="correct Btn" @click="choice(1)">确定</button>
        <button class="error Btn" @click="choice(2)">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import { MinusOutlined, CloseOutlined } from "@ant-design/icons-vue";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import MessageCode from "../MessageCode";
import { computed, onMounted, reactive, ref } from "vue";
import HomeContent from "../HomeContent";
import { ignorableWatch } from "@vueuse/core";
import TimerComponent from "@runtime/module/Timer/TimerComponent";
const messageBoxRef = ref<any>();
const state = reactive({
  winTypes: false,
});

//关闭
async function close() {
  state.winTypes = true;
}
async function choice(val: number) {
  if (val == 1) {
    //关闭
    WebSocketComponent.Default.PostMessage(new ClientMessage.ShutdownMessage());
  } else if (val == 2) {
    state.winTypes = false;
  }
}
</script>

<style scoped>
.hdr_box {
  width: 100%;
  height: 5vh;
  background: #222327;
  position: relative;
  text-align: left !important;
}

.tit_name {
  font-size: 20px;
  line-height: 5vh;
  color: #fff;
  /* padding-left: 64px; */
}
.timekeeping {
  color: #fff;
  font-size: 23px;
  display: inline-block;
  padding: 0 5px;
  margin-left: 1305px;
  margin-top: 10px;
}
.timekeepingLeft {
  color: #fff;
  font-size: 23px;
  display: inline-block;
  padding: 0 5px;
  margin-left: 1087px;
  margin-top: 10px;
}
.user_name {
  font-size: 19px;
  line-height: 5vh;
  color: #fff;
  position: absolute;
  right: 72px;
  /* right: 230px; */
}

.user_nameToRoll {
  font-size: 16px;
  line-height: 5vh;
  color: #fff;
  position: absolute;
  right: 170px;
}
.user_nameToLeft {
  font-size: 19px;
  line-height: 5vh;
  color: #fff;
  position: absolute;
  right: 222px;
}
.ico_min {
  font-size: 22px;
  position: absolute;
  right: 70px;
  top: 1.5vh;
}
.ico_clo {
  position: absolute;
  right: 22px;
  top: 1.5vh;
  font-size: 24px;
}

.ConfirmationBox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 216px;
  padding: 40px;
  background-color: #fff;
  border-radius: 10px;
}

.txt {
  text-align: center;
  font-size: 16px;
  margin-top: 40px;
  color: #000;
  font-weight: 400;
}
.tip {
  color: #000;
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 20px;
}
.Btn {
  position: absolute;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  width: 112px !important;
  height: 48px !important;
  border-radius: 6px;
}
.correct {
  right: 50px;
  bottom: 20px;
  color: #000;
  border: 1px solid #e9e9e9;
}
.correct:hover {
  background: #9bfb4e;
}

.error {
  left: 50px;
  bottom: 20px;
  color: #000;
  border: 1px solid #e9e9e9;
}
.error:hover {
  background: #9bfb4e;
}
</style>
